<template>
    <a-modal
        v-model:visible="visible"
        :title="title"
        :mask-closable="false"
        :esc-to-close="false"
        :modal-style="{ maxWidth: '800px' }"
        :body-style="{ maxHeight: '60vh' }"
        :width="width >= 600 ? 600 : '100%'"
        @before-ok="save"
        @close="reset"
    >
        <a-form ref="formRef" :model="form" :rules="rules" size="large" auto-label-width>
            <a-form-item label="公司名稱" field="enterpriseId">
                <a-select
                    v-model="form.enterpriseId"
                    :options="enterpriseList"
                    placeholder="请选择所屬用戶"
                    allow-clear
                    :allow-search="{ retainInputValue: true }"
                />
            </a-form-item>
            <a-form-item label="賬號數量" field="number">
                <a-input-number v-model="form.number" placeholder="请输入賬號數量" :min="1" mode="button"/>
            </a-form-item>
            <a-form-item label="備註信息" field="content">
                <a-textarea
                    v-model.trim="form.content"
                    placeholder="请输入備註信息"
                    show-word-limit
                    :max-length="200"
                    :auto-size="{ minRows: 3, maxRows: 5 }"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup lang="ts">
import {type FormInstance, Message, type RequestOption} from '@arco-design/web-vue'
import {useWindowSize} from '@vueuse/core'
import {addCustomer, getCustomer, updateCustomer} from '@/apis/mch/customer'
import type {LabelValueState} from '@/types/global'
import {getSelectEnterprises} from '@/apis/mch/enterprise'
import {useForm} from '@/hooks'
import {ref} from "vue";
const emit = defineEmits<{
    (e: 'save-success'): void
}>()
const {width} = useWindowSize()
const current = ref<number>(1)
const dataId = ref('')
const isUpdate = computed(() => !!dataId.value)
const title = computed(() => (isUpdate.value ? '修改賬號' : '新增賬號'))
const formRef = ref<FormInstance>()
const enterpriseList = ref<LabelValueState[]>([])
const rules: FormInstance['rules'] = {
    enterpriseId: [{required: true, message: '请選擇公司名稱'}],
    number: [{required: true, message: '请输入賬號數量'}]
}

const {form, resetForm} = useForm({})
// 重置
const reset = () => {
    formRef.value?.resetFields()
    current.value = 1
    resetForm()
}
const visible = ref(false)
// 新增
const onAdd = async () => {
    reset()
    dataId.value = ''
    visible.value = true
    const res = await getSelectEnterprises()
    enterpriseList.value = res.data
    Object.assign(form, res.data)
}
// 修改
const onUpdate = async (id: string) => {
    reset()
    dataId.value = id
    const res = await getCustomer(id)
    Object.assign(form, res.data)
    visible.value = true
    const rs = await getSelectEnterprises()
    enterpriseList.value = rs.data
}

// 保存
const save = async () => {
    try {
        const isInvalid = await formRef.value?.validate()
        if (isInvalid) return false
        if (isUpdate.value) {
            await updateCustomer(form)
            Message.success('修改成功')
        } else {
            await addCustomer(form)
            Message.success('新增成功')
        }
        emit('save-success')
        return true
    } catch (error) {
        return false
    }
}
defineExpose({onAdd, onUpdate})
</script>

<style lang="scss" scoped>
fieldset {
    padding: 15px 15px 0 15px;
    margin-bottom: 10px;
    border: 1px solid var(--color-neutral-3);
    border-radius: 3px;
    height: 440px;
}

fieldset legend {
    color: rgb(var(--gray-10));
    padding: 2px 5px 2px 5px;
    border: 1px solid var(--color-neutral-3);
    border-radius: 3px;
}

.mb-15 {
    margin-bottom: 15px
}

:deep(.arco-form-item-extra) {
    width: 100%;
}

:deep(.arco-modal-footer) {
    margin-top: -20px;
}
</style>
